<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="settings-general" #container>
  <form
    *ngIf="!isLoading"
    class="settings-general__form"
    [formGroup]="formSettings"
    (ngSubmit)="onSubmit()"
    autocomplete="off"
    gioFormFocusInvalid
  >
    <h1>Settings</h1>
    <gio-banner-info>
      Depending on your architecture, this configuration may be overridden by a local configuration file. See documentation for more
      information.
    </gio-banner-info>

    <mat-card class="settings-general__form__card" formGroupName="management">
      <mat-card-content>
        <h2 gioTableOfContents>Management</h2>
        <mat-form-field
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('management.title')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon *ngIf="isReadonlySetting('management.title')" class="settings-general__form__card__form-field__icon" matPrefix
            >lock</mat-icon
          >
          <mat-label>Title</mat-label>
          <input matInput formControlName="title" />
        </mat-form-field>

        <mat-form-field
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('management.url')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon *ngIf="isReadonlySetting('management.url')" class="settings-general__form__card__form-field__icon" matPrefix
            >lock</mat-icon
          >
          <mat-label>Management URL</mat-label>
          <input matInput formControlName="url" />
        </mat-form-field>

        <mat-divider></mat-divider>

        <gio-form-slide-toggle
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('console.support.enabled')"
          class="settings-general__form__card__form-field"
          formGroupName="support"
        >
          <mat-icon *ngIf="isReadonlySetting('console.support.enabled')" gioFormPrefix>lock</mat-icon>
          <gio-form-label>Activate Support</gio-form-label>
          <mat-slide-toggle gioFormSlideToggle formControlName="enabled" aria-label="Activate Support" name="support"></mat-slide-toggle>
        </gio-form-slide-toggle>

        <mat-divider></mat-divider>

        <gio-form-slide-toggle
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('console.userCreation.enabled')"
          class="settings-general__form__card__form-field"
          formGroupName="userCreation"
        >
          <mat-icon *ngIf="isReadonlySetting('console.userCreation.enabled')" gioFormPrefix>lock</mat-icon>
          <gio-form-label>Allow User Registration</gio-form-label>
          <mat-slide-toggle
            #managementUserCreationSlideToggle
            gioFormSlideToggle
            formControlName="enabled"
            aria-label="Allow user creation"
            name="userCreation"
          ></mat-slide-toggle>
        </gio-form-slide-toggle>

        <ng-container *ngIf="managementUserCreationSlideToggle.checked">
          <mat-divider></mat-divider>

          <gio-form-slide-toggle
            [matTooltip]="providedConfigurationMessage"
            [matTooltipDisabled]="!isReadonlySetting('console.userCreation.automaticValidation.enabled')"
            class="settings-general__form__card__form-field"
            formGroupName="automaticValidation"
          >
            <mat-icon *ngIf="isReadonlySetting('console.userCreation.automaticValidation.enabled')" gioFormPrefix>lock</mat-icon>
            <gio-form-label>Enable automatic validation of registration requests</gio-form-label>
            <mat-slide-toggle
              gioFormSlideToggle
              formControlName="enabled"
              aria-label="Enable auto validation of creation"
              name="automaticValidation"
            ></mat-slide-toggle>
          </gio-form-slide-toggle>
        </ng-container>
      </mat-card-content>
    </mat-card>

    <mat-card class="settings-general__form__card" formGroupName="scheduler">
      <mat-card-content>
        <h2 gioTableOfContents>Schedulers</h2>
        <mat-form-field
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('console.scheduler.tasks')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon *ngIf="isReadonlySetting('console.scheduler.tasks')" class="settings-general__form__card__form-field__icon" matPrefix
            >lock</mat-icon
          >
          <mat-label>Tasks (in seconds)</mat-label>
          <input matInput formControlName="tasks" type="number" min="0" />
        </mat-form-field>

        <mat-form-field
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('console.scheduler.notifications')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon
            *ngIf="isReadonlySetting('console.scheduler.notifications')"
            class="settings-general__form__card__form-field__icon"
            matPrefix
            >lock</mat-icon
          >
          <mat-label>Notifications (in seconds)</mat-label>
          <input #schedulerNotificationsInput matInput formControlName="notifications" type="number" min="0" />
        </mat-form-field>
      </mat-card-content>
    </mat-card>

    <mat-card class="settings-general__form__card" formGroupName="cors">
      <mat-card-content>
        <h2 gioTableOfContents>CORS</h2>
        <div class="settings-general__form__card__label">Allow-Origin</div>
        <p>
          The origin parameter specifies a URI that may access the resource. Scheme, domain and port are part of the
          <em>same-origin</em> definition. <br />
          If you choose to enable '*' it means that is allows all requests, regardless of origin.
        </p>
        <mat-form-field
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('http.api.management.cors.allow-origin')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon
            *ngIf="isReadonlySetting('http.api.management.cors.allow-origin')"
            class="settings-general__form__card__form-field__icon"
            matPrefix
            >lock</mat-icon
          >
          <mat-label>Allow-Origin</mat-label>
          <gio-form-tags-input
            formControlName="allowOrigin"
            placeholder="*, https://mydomain.com, (http|https).*.mydomain.com, ..."
            [tagValidationHook]="confirmAllowAllOrigins()"
          >
          </gio-form-tags-input>

          <mat-error *ngIf="formSettings.get('cors.allowOrigin')?.errors?.allowOrigin">{{
            formSettings.get('cors.allowOrigin')?.errors?.allowOrigin
          }}</mat-error>
          <mat-hint>Regular Expressions are also supported</mat-hint>
        </mat-form-field>

        <div class="settings-general__form__card__label">Access-Control-Allow-Methods</div>
        <p>Specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request.</p>
        <mat-form-field
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('http.api.management.cors.allow-methods')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon
            *ngIf="isReadonlySetting('http.api.management.cors.allow-methods')"
            class="settings-general__form__card__form-field__icon"
            matPrefix
            >lock</mat-icon
          >
          <mat-label>Access-Control-Allow-Methods</mat-label>
          <mat-select formControlName="allowMethods" multiple>
            <mat-option *ngFor="let method of httpMethods" [value]="method">{{ method }}</mat-option>
          </mat-select>
        </mat-form-field>

        <div class="settings-general__form__card__label">Allow-Headers</div>
        <p>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</p>
        <mat-form-field
          *ngIf="formSettings.get('cors.allowHeaders'); let allowHeadersFormControl"
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('http.api.management.cors.allow-headers')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon
            *ngIf="isReadonlySetting('http.api.management.cors.allow-headers')"
            class="settings-general__form__card__form-field__icon"
            matPrefix
            >lock</mat-icon
          >
          <mat-label>Allow-Headers</mat-label>

          <gio-form-tags-input
            aria-label="Allow-Headers selection"
            formControlName="allowHeaders"
            placeholder="Content-Type, ..."
            [addOnBlur]="false"
            [autocompleteOptions]="defaultHttpHeaders"
          >
          </gio-form-tags-input>
        </mat-form-field>

        <div class="settings-general__form__card__label">Exposed-Headers</div>
        <p>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</p>
        <mat-form-field
          *ngIf="formSettings.get('cors.exposedHeaders'); let exposedHeadersFormControl"
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('http.api.management.cors.exposed-headers')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon
            *ngIf="isReadonlySetting('http.api.management.cors.exposed-headers')"
            class="settings-general__form__card__form-field__icon"
            matPrefix
            >lock</mat-icon
          >
          <mat-label>Exposed-Headers</mat-label>

          <gio-form-tags-input
            aria-label="Exposed-Headers selection"
            formControlName="exposedHeaders"
            placeholder="Content-Type, ..."
            [addOnBlur]="false"
            [autocompleteOptions]="defaultHttpHeaders"
          >
          </gio-form-tags-input>
        </mat-form-field>

        <div class="settings-general__form__card__label">Max age</div>
        <p>How long the response from a pre-flight request can be cached by clients</p>
        <mat-form-field
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('http.api.management.cors.max-age')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon
            *ngIf="isReadonlySetting('http.api.management.cors.max-age')"
            class="settings-general__form__card__form-field__icon"
            matPrefix
            >lock</mat-icon
          >
          <mat-label>Max age</mat-label>
          <input #maxAgeInput matInput formControlName="maxAge" type="number" min="0" />
          <mat-hint>(seconds)</mat-hint>
        </mat-form-field>
      </mat-card-content>
    </mat-card>

    <mat-card *ngIf="!settings?.trialInstance?.enabled" class="settings-general__form__card" formGroupName="email">
      <mat-card-content>
        <h2 gioTableOfContents>SMTP</h2>
        <gio-form-slide-toggle
          [matTooltip]="providedConfigurationMessage"
          [matTooltipDisabled]="!isReadonlySetting('email.enabled')"
          class="settings-general__form__card__form-field"
        >
          <mat-icon *ngIf="isReadonlySetting('email.enabled')" class="settings-general__form__card__form-field__icon" gioFormPrefix
            >lock</mat-icon
          >
          <gio-form-label>Enable Emailing</gio-form-label>
          <mat-slide-toggle
            #emailEnabledSlideToggle
            gioFormSlideToggle
            formControlName="enabled"
            aria-label="Email enabled"
            name="emailEnabled"
          ></mat-slide-toggle>
        </gio-form-slide-toggle>

        <ng-container *ngIf="emailEnabledSlideToggle.checked">
          <mat-divider></mat-divider>

          <mat-form-field
            [matTooltip]="providedConfigurationMessage"
            [matTooltipDisabled]="!isReadonlySetting('email.host')"
            class="settings-general__form__card__form-field margin-top"
          >
            <mat-icon *ngIf="isReadonlySetting('email.host')" class="settings-general__form__card__form-field__icon" matPrefix
              >lock</mat-icon
            >
            <mat-label>Host</mat-label>
            <input matInput formControlName="host" />
          </mat-form-field>

          <mat-form-field
            [matTooltip]="providedConfigurationMessage"
            [matTooltipDisabled]="!isReadonlySetting('email.port')"
            class="settings-general__form__card__form-field"
          >
            <mat-icon *ngIf="isReadonlySetting('email.port')" class="settings-general__form__card__form-field__icon" matPrefix
              >lock</mat-icon
            >
            <mat-label>Port</mat-label>
            <input matInput formControlName="port" type="number" min="0" />
          </mat-form-field>

          <mat-form-field
            [matTooltip]="providedConfigurationMessage"
            [matTooltipDisabled]="!isReadonlySetting('email.username')"
            class="settings-general__form__card__form-field"
          >
            <mat-icon *ngIf="isReadonlySetting('email.username')" class="settings-general__form__card__form-field__icon" matPrefix
              >lock</mat-icon
            >
            <mat-label>Username</mat-label>
            <input matInput formControlName="username" />
          </mat-form-field>

          <mat-form-field
            [matTooltip]="providedConfigurationMessage"
            [matTooltipDisabled]="!isReadonlySetting('email.password')"
            class="settings-general__form__card__form-field"
          >
            <mat-icon *ngIf="isReadonlySetting('email.password')" class="settings-general__form__card__form-field__icon" matPrefix
              >lock</mat-icon
            >
            <mat-label>Password</mat-label>
            <input matInput formControlName="password" type="password" />
          </mat-form-field>

          <mat-form-field
            [matTooltip]="providedConfigurationMessage"
            [matTooltipDisabled]="!isReadonlySetting('email.protocol')"
            class="settings-general__form__card__form-field"
          >
            <mat-icon *ngIf="isReadonlySetting('email.protocol')" class="settings-general__form__card__form-field__icon" matPrefix
              >lock</mat-icon
            >
            <mat-label>Protocol</mat-label>
            <input matInput formControlName="protocol" />
          </mat-form-field>

          <mat-form-field
            [matTooltip]="providedConfigurationMessage"
            [matTooltipDisabled]="!isReadonlySetting('email.subject')"
            class="settings-general__form__card__form-field"
          >
            <mat-icon *ngIf="isReadonlySetting('email.subject')" class="settings-general__form__card__form-field__icon" matPrefix
              >lock</mat-icon
            >
            <mat-label>Subject</mat-label>
            <input matInput formControlName="subject" />
          </mat-form-field>

          <mat-form-field
            [matTooltip]="providedConfigurationMessage"
            [matTooltipDisabled]="!isReadonlySetting('email.from')"
            class="settings-general__form__card__form-field"
          >
            <mat-icon *ngIf="isReadonlySetting('email.from')" class="settings-general__form__card__form-field__icon" matPrefix
              >lock</mat-icon
            >
            <mat-label>From</mat-label>
            <input matInput formControlName="from" type="email" />
          </mat-form-field>

          <h3 class="settings-general__form__card__h3">Mail properties</h3>
          <ng-container formGroupName="properties">
            <gio-form-slide-toggle
              [matTooltip]="providedConfigurationMessage"
              [matTooltipDisabled]="!isReadonlySetting('email.properties.auth')"
              class="settings-general__form__card__form-field"
            >
              <mat-icon
                *ngIf="isReadonlySetting('email.properties.auth')"
                class="settings-general__form__card__form-field__icon"
                gioFormPrefix
                >lock</mat-icon
              >
              <gio-form-label>Enable Auth</gio-form-label>
              <mat-slide-toggle
                gioFormSlideToggle
                formControlName="auth"
                aria-label="Alerting enabled"
                name="emailPropertiesAuth"
              ></mat-slide-toggle>
            </gio-form-slide-toggle>

            <mat-divider></mat-divider>

            <gio-form-slide-toggle
              [matTooltip]="providedConfigurationMessage"
              [matTooltipDisabled]="!isReadonlySetting('email.properties.startTlsEnable')"
              class="settings-general__form__card__form-field"
            >
              <mat-icon
                *ngIf="isReadonlySetting('email.properties.startTlsEnable')"
                class="settings-general__form__card__form-field__icon"
                gioFormPrefix
                >lock</mat-icon
              >
              <gio-form-label>Enable Start TLS</gio-form-label>
              <mat-slide-toggle
                gioFormSlideToggle
                formControlName="startTlsEnable"
                aria-label="Start TLS enabled"
                name="emailPropertiesStartTlsEnable"
              ></mat-slide-toggle>
            </gio-form-slide-toggle>

            <mat-divider></mat-divider>

            <mat-form-field
              [matTooltip]="providedConfigurationMessage"
              [matTooltipDisabled]="!isReadonlySetting('email.sslTrust')"
              class="settings-general__form__card__form-field margin-top"
            >
              <mat-icon *ngIf="isReadonlySetting('email.sslTrust')" class="settings-general__form__card__form-field__icon" matPrefix
                >lock</mat-icon
              >
              <mat-label>SSL Trust</mat-label>
              <input #emailPropertiesSslTrustInput matInput formControlName="sslTrust" />
            </mat-form-field>
          </ng-container>
        </ng-container>
      </mat-card-content>
    </mat-card>
    <gio-save-bar [form]="formSettings" [formInitialValues]="formInitialValues"> </gio-save-bar>
  </form>

  <gio-table-of-contents
    class="settings-general__toc"
    [sectionNames]="{ '': 'Settings' }"
    scrollingContainer="#gio-toc-scrolling-container"
  ></gio-table-of-contents>
</div>
